<template>
  <div>
    <van-sticky>
      <div class="redTltle">
        <van-row>
          <van-col span="2">
            <van-icon name="arrow-left" @click="routerBack"/>
          </van-col>
          <van-col span="5" offset="8">
            <div class="redTltle">整刊展示</div>
          </van-col>
        </van-row>
      </div>

      <!--    搜索框-->
      <div style="padding: 0.3rem 0.2rem;background-color: #efefef">
        <van-row>
          <van-col span="5" class="bgimg">
            <!--          <div>-->
            <!--            {{value}}-->
            <!--          </div>-->
            <van-field
                readonly
                clickable
                :value="value"
                :placeholder="columns[0].name"
                @click="showPicker = true"
            />
            <van-popup v-model="showPicker" round position="bottom">
              <van-picker
                  show-toolbar
                  value-key="name"
                  :columns="columns"
                  @cancel="showPicker = false"
                  @confirm="onConfirm"
              />
            </van-popup>
          </van-col>
          <van-col span="16">
            <van-cell-group>
              <van-field v-model="searchValue" placeholder="全部文献搜索"/>
            </van-cell-group>
          </van-col>
          <van-col span="3">
            <div class="searchBtn" @click="searchBtn">
              搜索
            </div>
          </van-col>

        </van-row>
      </div>

      <!--    搜索框end-->
      <!--    小标题-->
      <!--      <div class="redText">-->
      <!--        公开出版-->
      <!--      </div>-->
      <div class="bookpage">
        <div>
          <div>找到{{ count }}条</div>
        </div>
        <div @click="show = true">
          <van-icon name="filter-o"/>
          筛选
        </div>
      </div>
    </van-sticky>
    <!--      <van-cell is-link title="基础用法" @click="show = true" />-->
    <van-action-sheet v-model="show" :round="false" :actions="actions" @select="onSelect"/>
    <!--    小标题en'd-->
    <!--    list-->
    <div >
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="50"
        >
          <div class="bookList">
            <div v-for="(item , index) in imgBook" :key="index" class="items" @click="bookDetails(item , index)">
              <div>
                <van-image
                    width="2.547rem"
                    height="3.6rem"
                    :src="item.pinyinName2 + '.jpg'"
                />
              </div>
              <div class="bookTitlt">
                {{ item.title }}
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <!--    list-->

  </div>
</template>

<script>
import {search, ZkJssearch, PeriodicalResource} from '@/api/journalApi/openApi'
import {Toast} from "vant";

export default {
  name: "Exhibition",
  data() {
    return {
      seacrchCode: 1,
      show: false,
      actions: [{name: '全部', code: '1'}, {name: '公开出版', code: '2'}, {name: '非公开出版', code: '3'}],
      asd: 2,
      code: 'source_cykm',//默认下拉的code
      page: 1,
      ips: 'http://218.89.178.103:805/tp/bdqk/cover/',
      ip: 'https://c61.cnki.net/CJFD/big/', //热门文章拼接url
      count: 0,
      loading: false,  //是否底部加载更多处于加载状态   底部加载中
      finished: false, //是否加载完成 加载完成 不在加载    已经底了
      refreshing: false, //是否处于下拉刷新状态  顶部刷新中
      categoryIndex: 1, //党校发行和相关党校
      value: '刊名', //下拉值
      searchValue: '',//输入值
      showPicker: false, //遮罩层
      columns: [{name: '刊名', code: 'source_cykm'}, {name: '主办单位', code: 'publisher'}
        , {name: 'CN', code: 'cn'}, {name: 'ISSN', code: 'issn'}],

      imgBook: [
        {
          name: '安徽行政学院学报',
          url: require('../../assets/book_gkcb.png'),
        },
        {
          name: '中国改革',
          url: require('../../assets/book_xq.png'),
        },
        {
          name: '安徽行政学院学报',
          url: require('../../assets/book_gkcb.png'),
        },
        {
          name: '中国改革',
          url: require('../../assets/book_xq.png'),
        },
        {
          name: '安徽行政学院学报',
          url: require('../../assets/book_gkcb.png'),
        },
        {
          name: '中国改革',
          url: require('../../assets/book_xq.png'),
        },
        {
          name: '安徽行政学院学报',
          url: require('../../assets/book_gkcb.png'),
        },
        {
          name: '中国改革',
          url: require('../../assets/book_xq.png'),
        },
        {
          name: '安徽行政学院学报',
          url: require('../../assets/book_gkcb.png'),
        },
        {
          name: '中国改革',
          url: require('../../assets/book_xq.png'),
        },

      ]
    };
  },
  created() {
    let list = {
      "page": 1,
      "pageSize": 18,
      searchType: this.code,
      searchValue: this.searchValue,
    }
    ZkJssearch(list)
        .then(res => {
         // console.log(res)
          this.count = res.data.data.count
          let arr = res.data.data.list
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].pinyinName == 1) {
           //   console.log('没有pinyinName')

              arr[i].pinyinName2 = this.ips + arr[i].number
            //  console.log(arr[i].pinyinName2)
            } else if (arr[i].number == 1) {
            //  console.log('没有number')
              arr[i].pinyinName2 = this.ip + arr[i].pinyinName
              //console.log(arr[i].pinyinName2)
            }

           // console.log(arr[i].pinyinName)
          }
          this.imgBook = arr
          //console.log(this.imgBook)

        })

  },
  methods: {
    //返回按钮
    routerBack() {
      this.$router.go(-1)
    },
    //无限加载函数
    onLoad() {
      setTimeout(() => {
        //下拉刷新 数据清零
        if (this.refreshing) {
          this.imgBook = []
          this.refreshing = false;  //判断如果下拉刷新就请求第一页刷新
          this.page = 1
         // console.log('第一个')
        }
        if (this.seacrchCode == 1) {
          this.showfaker = false
          this.showmaker = true
          let list = {
            "page": this.asd++,
            "pageSize": 18,
            searchType: this.code,
            searchValue: this.searchValue,
          }
          ZkJssearch(list)
              .then(res => {
                this.count = res.data.data.count
                let arr = res.data.data.list
                for (let i = 0; i < arr.length; i++) {
                  if (arr[i].pinyinName == 1) {
                  //  console.log('没有pinyinName')

                    arr[i].pinyinName2 = this.ips + arr[i].number
                  //  console.log(arr[i].pinyinName2)
                  } else if (arr[i].number == 1) {
                  //  console.log('没有number')
                    arr[i].pinyinName2 = this.ip + arr[i].pinyinName
                   // console.log(arr[i].pinyinName2)
                  }

                  //console.log(arr[i].pinyinName)
                }
                // this.imgBook = arr
                this.imgBook.push.apply(this.imgBook, arr)  //合并请求数组
                // this.imgBook = arr


              })
        } else if (this.seacrchCode == 2) {
          this.showfaker = true
          this.showmaker = false
          let list = {
            "type": "0",
            "sortCodeList": [],
            "page": this.asd++,   //因为有第一页数据 所以从第二页自增长
            "pageSize": 18,
            searchType: this.code,
            searchValue: this.searchValue,
          }
          // 加载无限下划请求
          search(list)
              .then(res => {
                //console.log(list)
                this.count = res.data.data.count  //总条数
                this.imgBook.push.apply(this.imgBook, res.data.data.list)  //合并请求数组
              })

        } else if (this.seacrchCode == 3) {
          let list = {
            // classify: "",
            page: this.asd++,   //因为有第一页数据 所以从第二页自增长
            pageSize: 18,
            // region: "",
            searchType:this.code,
            searchValue:this.searchValue,
          }
          PeriodicalResource(list)
              .then(res => {
                // console.log(res.data.data.list)
                this.count = res.data.data.count

                // this.imgBook.push(res.data.data.list)
                // this.imgBook = res.data.data.list
                let arr = res.data.data.list
                for (let i = 0; i < arr.length; i++) {
                  arr[i].pinyinName2 = this.ips + arr[i].number
                 // console.log(arr[i].pinyinName)
                }
                this.imgBook.push.apply(this.imgBook, arr)  //合并请求数组

                // this.imgBook.push.apply( this.imgBook,res.data.data.list)
                // console.log(this.imgBook)
              })

        }

        //console.log('到底了')
        this.loading = false;
        //总长度和总页数相等 停止请求回调
        if (this.imgBook.length >= this.count) {  //如果总条数
          this.finished = true;
        }
      }, 1000);
    },
    //下拉刷新完成回调函数 数据重新加载
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      //下拉刷新 数据清零
      if (this.refreshing) {
        this.imgBook = []
        this.refreshing = false;  //判断如果下拉刷新就请求第一页刷新
        // console.log('第一个')
      }
      //重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      if (this.seacrchCode == 1) {
        let list = {
          "page": 1,
          "pageSize": 18,
          searchType: this.code,
          searchValue: this.searchValue,
        }
        ZkJssearch(list)
            .then(res => {
              this.count = res.data.data.count
              let arr = res.data.data.list
              for (let i = 0; i < arr.length; i++) {
                if (arr[i].pinyinName == 1) {
                  //console.log('没有pinyinName')

                  arr[i].pinyinName2 = this.ips + arr[i].number
                  //console.log(arr[i].pinyinName2)
                } else if (arr[i].number == 1) {
                  //console.log('没有number')
                  arr[i].pinyinName2 = this.ip + arr[i].pinyinName
                  //console.log(arr[i].pinyinName2)
                }

                //console.log(arr[i].pinyinName)
              }
              this.imgBook = arr
              Toast.success('刷新成功');
              // this.imgBook.push.apply(this.imgBook,arr)  //合并请求数组
              // this.imgBook = arr


            })
      } else if (this.seacrchCode == 2) {
        let list = {
          "type": "0",
          "sortCodeList": [],
          "page": 1,   //因为有第一页数据 所以从第二页自增长
          "pageSize": 18,
          searchType: this.code,
          searchValue: this.searchValue,
        }
        // 加载无限下划请求
        search(list)
            .then(res => {
              //console.log(list)
              this.count = res.data.data.count  //总条数
              this.imgBook = res.data.data.list
              Toast.success('刷新成功');
              this.imgBook.push.apply(this.imgBook, res.data.data.list)  //合并请求数组
            })

      } else if (this.seacrchCode == 3) {
        this.showfaker = false
        this.showmaker = true
        let list = {
          // classify: "",
          page: 1,   //因为有第一页数据 所以从第二页自增长
          pageSize: 18,
          // region: "",
          searchType:this.code,
          searchValue:this.searchValue,
        }
        PeriodicalResource(list)
            .then(res => {
              // console.log(res.data.data.list)
              this.count = res.data.data.count

              // this.imgBook.push(res.data.data.list)
              // this.imgBook = res.data.data.list
              let arr = res.data.data.list
              for (let i = 0; i < arr.length; i++) {
                arr[i].pinyinName2 = this.ips + arr[i].number
               // console.log(arr[i].pinyinName)
              }
              this.imgBook = arr
              // this.imgBook.push.apply( this.imgBook,arr)  //合并请求数组
              Toast.success('刷新成功');
              // this.imgBook.push.apply( this.imgBook,res.data.data.list)
              // console.log(this.imgBook)
            })

      }


      // var list = {
      //     "type": "0",
      //     "sortCodeList": [],
      //     "page": 1,   //因为有第一页数据 所以从第二页自增长
      //     "pageSize": 18,
      //     searchType:this.code,
      //     searchValue:this.searchValue,
      //   }
      // // 加载无限下划请求
      // search(list)
      //     .then(res=>{
      //       // console.log(list)
      //       this.count = res.data.data.count  //总条数
      //       this.imgBook = res.data.data.list
      //
      //       // this.imgBook.push.apply( this.imgBook,res.data.data.list)  //合并请求数组
      //     })


      // this.onLoad();

    },

    //搜索按钮
    searchBtn() {
      let list = {
        "type": '0',
        "sortCodeList": [],
        "page": 1,
        "pageSize": 18,
        searchType: this.code,
        searchValue: this.searchValue,
      }
      if(this.seacrchCode == 2){
        search(list)
            .then(res => {
              // console.log(res.data.data.list)
              this.count = res.data.data.count
              if (this.count === 0) {
                this.imgBook = []
                Toast({
                  message: '暂无数据',
                  icon: 'cross',
                });
              }else {
                let arr = res.data.data.list
                for (let i = 0; i < arr.length; i++) {
                  if (!arr[i].pinyinName ) {
                   // console.log('没有pinyinName')

                    arr[i].pinyinName2 = this.ips + arr[i].number
                   // console.log(arr[i].pinyinName2)
                  } else if (!arr[i].number) {
                    //console.log('没有number')
                    arr[i].pinyinName2 = this.ip + arr[i].pinyinName
                   // console.log(arr[i].pinyinName2)
                  }

                  //console.log(arr[i].pinyinName)
                }
                this.imgBook = arr
              }
              // this.imgBook = res.data.data.list
            })
      }else if(this.seacrchCode == 1){
        ZkJssearch(list)
            .then(res => {
              // console.log(res.data.data.list)
              this.count = res.data.data.count
              if (this.count === 0) {
                this.imgBook = []
                Toast({
                  message: '暂无数据',
                  icon: 'cross',
                });
              }else {
                let arr = res.data.data.list
                for (let i = 0; i < arr.length; i++) {
                  if (arr[i].pinyinName == 1) {
                   // console.log('没有pinyinName')

                    arr[i].pinyinName2 = this.ips + arr[i].number
                   // console.log(arr[i].pinyinName2)
                  } else if (arr[i].number == 1) {
                   // console.log('没有number')
                    arr[i].pinyinName2 = this.ip + arr[i].pinyinName
                   // console.log(arr[i].pinyinName2)
                  }

                 // console.log(arr[i].pinyinName)
                }
                this.imgBook = arr
              }
              // this.imgBook = res.data.data.list
            })
      }else if(this.seacrchCode == 3){
        let list = {
          // searchType: "",
          // searchValue: "",
          page: 1,
          pageSize: 18,
          searchType:this.code,
          searchValue:this.searchValue,
        }
        PeriodicalResource(list)
            .then(res => {
              // console.log(res.data.data.list)
              this.count = res.data.data.count

              // this.imgBook.push(res.data.data.list)
              // this.imgBook = res.data.data.list
              let arr = res.data.data.list
              // console.log(this.imgBook)
              for (let i = 0 ; i < arr.length; i++){
                arr[i].pinyinName = 1
                arr[i].pinyinName2 = this.ips + arr[i].number
                //console.log(arr[i].pinyinName2)
              }
              this.imgBook = arr

              // this.imgBook.push.apply( this.imgBook,res.data.data.list)
              // console.log(this.imgBook)
            })
      }

    },
    //下拉
    onConfirm(value) {
      //console.log(value)
      this.value = value.name;
      this.code = value.code;
      this.showPicker = false;
      this.page = 1
      let list = {
        "type": this.categoryIndex,
        "sortCodeList": [],
        "page": 1,
        "pageSize": 18,
        searchType: value.code,
        searchValue: this.searchValue,
      }
      search(list)
          .then(res => {
            // console.log(res.data.data.list)
            this.count = res.data.data.count
            let arr = res.data.data.list
            // console.log(this.imgBook)
            for (let i = 0; i < arr.length; i++) {
              if (arr[i].pinyinName == 1) {
               // console.log('没有pinyinName')

                arr[i].pinyinName2 = this.ips + arr[i].number
              //  console.log(arr[i].pinyinName2)
              } else if (arr[i].number == 1) {
               // console.log('没有number')
                arr[i].pinyinName2 = this.ip + arr[i].pinyinName
               // console.log(arr[i].pinyinName2)
              }

              //console.log(arr[i].pinyinName)
            }
            this.imgBook.push.apply(this.imgBook, arr)
            // console.log(this.imgBook)
          })

    },
    //跳转详情页面
    bookDetails(item, index) {
      //console.log(item)

      if (item.pinyinName == 1) {
        this.$router.push({path: '/notOpenbookDetails', query: {ids: item.title}})

      } else if (item.number == 1) {
        this.$router.push({path: '/bookDetails', query: {ids: item.pinyinName, imgs: item.pinyinName2}})

      }

    },

    onSelect(item) {
      this.seacrchCode = item.code
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      if (item.code == 1) {

        let list = {
          page: "1",
          pageSize: "18",
          searchType: this.code,
          searchValue: this.searchValue,
        }
        ZkJssearch(list)
            .then(res => {
              this.count = res.data.data.count
              let arr = res.data.data.list
              for (let i = 0; i < arr.length; i++) {
                if (arr[i].pinyinName == 1) {
                //  console.log('没有pinyinName')

                  arr[i].pinyinName2 = this.ips + arr[i].number
                 // console.log(arr[i].pinyinName2)
                } else if (arr[i].number == 1) {
                 // console.log('没有number')
                  arr[i].pinyinName2 = this.ip + arr[i].pinyinName
                 // console.log(arr[i].pinyinName2)
                }

                //console.log(arr[i].pinyinName)
              }
              this.imgBook = arr
            })
      } else if (item.code == 2) {

        let list = {
          "type": "0",
          "sortCodeList": [],
          "page": this.page,
          "pageSize": 18,
          searchType: this.code,
          searchValue: this.searchValue,
        }
        search(list)
            .then(res => {
              // console.log(res.data.data.list)
              this.count = res.data.data.count
              // console.log(this.imgBook)
              let arr = res.data.data.list
              // console.log(this.imgBook)
              for (let i = 0; i < arr.length; i++) {
                 // console.log('没有pinyinName')
                  arr[i].number = 1
                  arr[i].pinyinName2 = this.ip + arr[i].pinyinName
                  //console.log(arr[i].pinyinName2)

              }
              this.imgBook = arr
              // this.imgBook = res.data.data.list

              // this.imgBook.push.apply( this.imgBook,res.data.data.list)
              // console.log(this.imgBook)
            })
      } else if (item.code == 3) {

        let list = {
          // classify: "",
          page: 1,
          pageSize: 18,
          // region: "",
          searchType:this.code,
          searchValue:this.searchValue,
        }
        PeriodicalResource(list)
            .then(res => {
              // console.log(res.data.data.list)
              this.count = res.data.data.count

              // this.imgBook.push(res.data.data.list)
              // this.imgBook = res.data.data.list
              let arr = res.data.data.list
              // console.log(this.imgBook)
              for (let i = 0 ; i < arr.length; i++){
                  arr[i].pinyinName = 1
                  arr[i].pinyinName2 = this.ips + arr[i].number
                 // console.log(arr[i].pinyinName2)
              }
              this.imgBook = arr

              // this.imgBook.push.apply( this.imgBook,res.data.data.list)
              // console.log(this.imgBook)
            })
      }


      this.show = false;
      //console.log(item.name, item.code)
      // Toast(item.code);
    },
  },
}
</script>

<style scoped>
.bookTitlt {
  text-align: center;
  width: 2.547rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redTltle {
  /*width: 10rem;*/
  height: 1.15rem;
  background-color: #af2536;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  text-align: center;
  line-height: 1.15rem;
  /*margin-bottom: 0.3rem;*/
}

.redText {
  margin: 0.267rem;
  font-family: PingFang-SC-Heavy;
  font-size: 0.373rem;
  font-weight: bolder;
  font-stretch: normal;
  color: #af2536;
}

.bookList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 1rem;

}

.items {
  margin: 0.38rem;
}

.bookpage {
  background-color: white;
  /*padding: 0.3rem 0;*/
  width: 100%;
  height: 1.187rem;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  display: flex;
  color: black;
  border: solid 0.013rem #eaeaea;
  line-height: 1.187rem;
}

.bookpage > div:first-child {
  margin-left: 0.3rem;
  width: 7.28rem;
  border-right: solid 0.013rem #eaeaea;
}

.bookpage > div:last-child {
  padding-left: 0.693rem;
}

.searchBtn {
  background-color: #af2536;
  border-radius: 0rem 0.053rem 0.053rem 0rem;
  width: 1.2rem;
  height: 1.04rem;
  line-height: 1.04rem;
  text-align: center;
  background-color: #929292;
  border-radius: 0rem 0.053rem 0.053rem 0rem;
  font-family: PingFang-SC-Medium;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  opacity: 0.8;
}

.active {
  background-color: #af2536;
  color: #ffffff !important;

}

.DXFXxgdx {
  width: 1.6rem;
  height: 0.7rem;
  line-height: 0.7rem;
  /*background-color: #af2536;*/
  border-radius: 0.04rem;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  /*opacity: 0.65;*/
  text-align: center;
}

.bgimg {
  background-image: url('../../assets/label.png');
  background-size: 100% 100%;
  width: 2rem;
  height: 1.05rem;
  line-height: 44px;
  text-align: center;
  font-size: 0.293rem;
  /*background-color: #1b6d85;*/
  /*z-index: 999;*/
  /*padding: 10px 16px;*/
  /*border-right: 1px gray solid;*/
}
</style>
